<template>
  <div class="app-container">
    <git-navigation />

    <el-col :span="22" :offset="1">
      <!--      <el-divider />-->
      <el-row>
        <el-col :span="20" :loading="loading" :model="commit">
          提交
          <strong>{{ commit.short_id }}</strong>
          &nbsp;
          <el-tooltip class="item" effect="dark" content="复制提交的 sha 到粘贴板" placement="bottom-start">
            <i
              v-clipboard:copy="commit.id"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              style="cursor:pointer;"
              class="el-icon-document-copy"
            />
          </el-tooltip>&nbsp;
          authored
          <strong>·</strong>
          <el-tooltip
            class="item"
            style="cursor:pointer;"
            effect="dark"
            :content="commit.committed_date | filterTime"
            placement="top"
          >
            <span>{{ commit.committed_date| filterDurationTime }}</span>
          </el-tooltip>&nbsp;
          作者:
          <strong>{{ commit.author_name }}</strong>
          <router-link :to="browseFile(commit.id)">
            <el-button style="margin-left:20px;" size="small">浏览文件</el-button>
          </router-link>
        </el-col>
      </el-row>
      <!--      <el-divider />-->
      <h4 :model="commit">{{ commit.title }}</h4>
      <hr>
      <!--      <el-row>-->
      <!--        <h4 :model="commit">{{ commit.title }}</h4>-->
      <!--        <el-col :span="24" :model="commit">-->
      <!--          <el-row class="info-well">-->
      <!--            -o- &nbsp; 上级-->
      <!--&lt;!&ndash;            <el-link v-for="commit.parent_ids">&ndash;&gt;-->
      <!--              <i class="el-icon-s-operation" />-->
      <!--&lt;!&ndash;            </el-link>&ndash;&gt;-->
      <!--          </el-row>-->
      <!--          <el-row class="info-well">2</el-row>-->
      <!--          <el-row class="info-well">流水线 {{commit.last_pipeline.id}} · {{commit.last_pipeline.status}}</el-row>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row :model="diff">
        <el-col v-for="(item,index) in diff" :key="index">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold">{{ item.new_path }}</span>
            </div>
            <template>
              <p>
                <CodeMirrors ref="oneLineCodeMirrors" :value="item.diff" />
              </p>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import { getData } from '@/api/requestData';
import { parseTime, handleTimeDuration } from '@/utils/index';
import GitNavigation from './components/GitNavigation';
import CodeMirrors from '@/components/CodeMirror';

export default {
  components: {
    GitNavigation,
    CodeMirrors
  },
  filters: {
    filterTime(time) {
      return parseTime(time);
    },
    filterDurationTime(time) {
      return handleTimeDuration(time);
    }
  },
  data() {
    return {
      pid: this.$route.params.pid,
      pname: this.$route.params.projectName,
      commit: {},
      diff: [],
      shortId: '',
      loading: true
    };
  },
  created() {
    this.commitDetail();
  },
  methods: {
    commitDetail() {
      const params = {
        sha: this.$route.params.sha
      };
      getData('/git/public/commit/diff/' + this.pid, params)
        .then((response) => {
          this.loading = true;
          this.commit = response.data.commit;
          this.diff = response.data.diff;
          console.log(this.commit);
          this.loading = false;
        })
        .catch(() => {});
    },
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功');
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败');
    },
    browseFile(sha) {
      return '/git/code/' + this.pid + '/' + this.pname + '/' + sha + '/root';
    }
  }
};
</script>

<style scoped>
.info-well {
  border-bottom: 1px solid #eef0f2;
  padding: 16px;
}
</style>
